<template>
  <div class="h_full w_full flexcolumn">
    <div class="p-15 flexbetween">
      <div class="flex">
        <div class="c_222333 f-14 mr-5">留言({{ hangupList.length }})</div>
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link flexcenter commhover fw-6">
            <span class="droptitle textover">{{ typeItem.name }}</span>
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" class="p-8">
            <el-dropdown-item
              v-for="(item, index) in typeList"
              :key="index"
              :command="item.id"
              >{{ item.name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-button type="warning" size="mini" plain @click="handleOpen"
        >批量接入</el-button
      >
      <div>
        <i class="el-icon-close f-16 commhover" @click="handleClose"></i>
      </div>
    </div>
    <div class="chatbody">
      <template v-if="hangupList.length">
        <chat-item
          v-for="(item, index) in hangupList"
          :key="index"
          :item="item"
          :active="selectItem && selectItem.wxid == item.wxid"
          @handleItem="handleChateItem"
        />
      </template>
      <div v-else class="flexcenter flexcolumn mt-100">
        <img src="@/assets/images/empty1.png" alt="" class="emptyimg mb-20" />
        <div class="f-14 c_text3">暂无对话</div>
      </div>
    </div>
    <el-dialog
      :visible.sync="open"
      width="400px"
      :before-close="handleCloseOpen"
      append-to-body
      title="批量接入"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="0">
        <el-form-item prop="num">
          接入
          <el-input
            v-model.number="form.num"
            size="small"
            type="number"
            style="width: 90px"
          ></el-input>
          个留言（1~300）
        </el-form-item>
        <el-form-item prop="type">
          接入对话类型：
          <el-select
            size="small"
            v-model="form.type"
            placeholder="请选择"
            style="width: 120px"
          >
            <el-option
              v-for="(item, index) in formtype"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleCloseOpen">取 消</el-button>
        <el-button size="small" type="primary" @click="handleSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ChatItem from "./components/ChatItem.vue";
export default {
  data() {

    var validateNumber = (rule, value, callback) => {
        if (!value && value!==0) {
          return callback(new Error('批量接入个数不能为空'));
        }
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 1 || value > 300) {
            callback(new Error('批量接入个数取值范围为1-300'));
          } else {
            callback();
          }
        }
      };

    return {
      typeItem: null,
      typeList: [
        { id: 1, name: "全部消息" },
        { id: 2, name: "私聊" },
        { id: 3, name: "群聊" },
      ],
      hangupList: [
        {
          wxid: "R:10814949724396927",
          nickname: "测试群",
          avatar:
            "//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/5922867c1cbd03953b39d60d0ece5f33.png",
          corp_name: "",
        },
      ],
      selectItem: null,

      open: false,
      form: {
        num: "",
        type:1
      },
      rules: {
        num: [
          { required: true, validator: validateNumber, trigger: "blur" },
        ],
        type: [
          { required: true, message: "请选择对话类型", trigger: "change" },
        ],
      },
      formtype: [
        { id: 1, name: "私聊+群聊" },
        { id: 2, name: "私聊" },
        { id: 3, name: "群聊" },
      ],
    };
  },
  components: {
    ChatItem,
  },
  created() {
    this.handleCommand(1);
  },
  methods: {
    handleCommand(command) {
      this.typeList.forEach((item) => {
        if (command == item.id) {
          this.typeItem = item;
        }
      });
    },

    handleClose() {
      this.$emit("close");
    },

    handleChateItem(item) {
      this.selectItem = item;
      this.chatkey = Date.now();
    },

    handleOpen() {
      this.open = true;
    },

    handleCloseOpen() {
      this.open = false;
    },

    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.handleCloseOpen();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chatbody {
  flex: 1;
  height: calc(100% - 50px);
  position: relative;
}
.emptyimg {
  width: 90px;
  height: 90px;
}
</style>